import {CheckAccessEleType} from "@kordar-lib/base";
import {
    AppLayoutContext,
    PaginationPanel,
    resourceAccessItems,
    resourceRemoveEvent,
    resourceService,
    useTable,
    withDocHoc
} from "@kordar/easyui-tpl";
import React, {useContext, useEffect, useState} from "react";
import {DefaultPanel, useRefDialog} from "@kordar/easyui";
import {DatasetImageContext} from "./context";
import {Layout, LayoutPanel, TabPanel, Tabs} from "rc-easyui"
import TablePanel from "./table";
import {tparam} from "@kordar-lib/i18n";
import {setDatasetImageIndex} from "../../../store/dataset";
import {useLocation, useNavigate} from "react-router-dom";
import {getDataset} from "./helper";
import LabelPanel from "./label/label";
import {FormDialog} from "./dialog";

let name = "dataset-image"
let accessItems = [
    { type: CheckAccessEleType.AND, value: ["/resource/dataset-label/list"], key: name },
    ...resourceAccessItems(name)
]

const DatasetImage = ({ pageConfig, fetchConfig }) => {

    const { dispatch, useAppSelector } = useContext(AppLayoutContext);
    const [dataset, setDataset] = useState({});

    const [selectedIndex, setSelectedIndex] = useState(-1)
    const datasetImageTabIndex = useAppSelector?.((state) => state?.dataset.datasetImageTabIndex)

    const location = useLocation();
    const navigate = useNavigate();
    const queryParams = new URLSearchParams(location.search);

    const id = queryParams.get("id");

    const tabSelect = (panel) => {
        let {index} = panel.props;
        dispatch(setDatasetImageIndex(index))
    }

    const tb = useTable({
        name: name,
        fetch: (request) => resourceService.list(name, request),
        checkAccessItems: accessItems,
        defaultPageSize: 30
    })

    tb.ctx.registerEvent("remove", resourceRemoveEvent(tb.ctx))

    let formdlg = useRefDialog()


    useEffect(() => {
        tb.ctx.search()
        setSelectedIndex(datasetImageTabIndex)
        getDataset(id, setDataset, () => navigate("/dataset/index"))
    }, [tb.version])

    return (
        <DatasetImageContext.Provider value={{ ctx: tb.ctx, ctxState: tb.ctxState, pageConfig: pageConfig, fetchConfig: fetchConfig, dataset: dataset, refs: { formdlg }}}>
            <div className="panel f-column admin-default-panel cover" style={{margin: 5}}>
                <Layout className="f-column">
                    <LayoutPanel region="west" split style={{ width: 300, maxWidth: 450, minWidth: 300 }}>
                        <LabelPanel />
                    </LayoutPanel>
                    <Tabs style={{ width: '100%', height: '100%' }} selectedIndex={selectedIndex} onTabSelect={tabSelect}>
                        <TabPanel index={0} title={tparam(pageConfig, 'image-list.text', 'Image List')} bodyCls="f-column f-full" border={false}>
                            <DefaultPanel mode="f-full cover" footer={() => <PaginationPanel ctx={tb.ctx} ctxState={tb.ctxState} />}>
                                <FormDialog {...formdlg} />
                                <TablePanel />
                            </DefaultPanel>
                        </TabPanel>
                        <TabPanel title="Tab2" bodyCls="f-column f-full" index={1} border={false}>
                            <DefaultPanel mode="f-full cover">
                                <h1>AAAA</h1>
                            </DefaultPanel>
                        </TabPanel>
                        <TabPanel title="Tab3" index={2} border={false}>
                            BBB
                        </TabPanel>
                    </Tabs>
                </Layout>
            </div>
        </DatasetImageContext.Provider>
    )
}

export default withDocHoc({ name: "DatasetImage", fetchConfig: () => resourceService.configs(name) })(DatasetImage)
